<template>
  <div id="SpaceManage">
    <div style="margin-bottom: 20px">
      <a-flex justify="space-between">
        <!--   标题   -->
        <h2 style="font-weight: bold">
          空间成员管理 - <a :href="`/space/${props.id}`">{{ props.id }}</a>
        </h2>
      </a-flex>
    </div>

    <!--  添加用户表单  -->
    <!-- 使用Ant Design的Card组件实现背景和阴影，自带hover效果 -->
    <a-card class="spaceUser-search-form" :hoverable="true" :bordered="false">
      <template #title>
        <h3 style="font-weight: bold">添加空间成员</h3>
      </template>
      <a-form layout="inline" :model="formData" @finish="handleSubmit">
        <a-form-item label="用户 id" name="userId">
          <a-input v-model:value="formData.userId" placeholder="请输入用户 id" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button class="custom-btn" type="primary" html-type="submit" :icon="h(PlusOutlined)">
            添加用户
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!--  空间表格展示区域  -->
    <!-- 表格用Card包裹，统一风格 -->
    <a-card class="table-container" :bordered="false" title="成员列表" :loading="loading">
      <a-table
        class="spaceUser-table"
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: 'max-content' }"
        row-key="id"
        :locale="{ emptyText: '当前空间暂无成员，请添加成员' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'userInfo'">
            <a-space>
              <a-avatar :src="record.user?.userAvatar" />
              {{ record.user?.userName }}
            </a-space>
          </template>
          <template v-if="column.dataIndex === 'spaceRole'">
            <a-tag v-if="record.user?.id === space?.userId" color="green"> 创建人 </a-tag>
            <a-select
              v-if="record.user?.id !== space?.userId"
              v-model:value="record.spaceRole"
              :options="SPACE_ROLE_OPTIONS"
              @change="(value: any) => editSpaceRole(value, record)"
              size="small"
            />
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space wrap>
              <a-button
                class="custom-btn"
                type="link"
                danger
                @click="doDeleteSpaceUser(record.id)"
                :icon="h(DeleteOutlined)"
                :disabled="record.user?.id === space?.userId"
              >
                删除
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { SPACE_ROLE_OPTIONS } from '@/constants/space'
// 引入Ant Design图标
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import {
  addSpaceUserUsingPost,
  deleteSpaceUserUsingPost,
  editSpaceUserUsingPost,
  listSpaceUserUsingPost,
} from '@/api/spaceUserController'
import { getSpaceVoByIdUsingGet } from '@/api/spaceController'

const router = useRouter()

// 定义表头（dataIndex为数据库中的字段信息）
// 表格列
const columns = [
  {
    title: '用户',
    dataIndex: 'userInfo',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '角色',
    dataIndex: 'spaceRole',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '操作',
    key: 'action',
    ellipsis: true,
    align: 'center',
  },
]

// 定义路由转递的空间 id
interface props {
  id: string
}

// 获取路由参数
const props = defineProps<props>()

// 获取当前登录用户信息
const space = ref<API.SpaceVO>()
// 根据 id 获取空间信息
const getSpaceById = async () => {
  const res = await getSpaceVoByIdUsingGet({
    // @ts-ignore
    id: props.id,
  })
  if (res.data?.code === 0 && res.data?.data) {
    space.value = res.data?.data
  } else {
    message.error('空间信息获取失败' + res.data?.message)
  }
}

// 定义数据源
// 给团队空间管理员展示脱敏的成员信息
const dataList = ref<API.SpaceUserVO[]>()
// 加载状态（用于表格区域）
const loading = ref(false)

// 调用api，向后端请求数据
// 给管理员展示未脱敏的空间信息
const fetchData = async () => {
  console.log('props.id', props.id)
  const spaceId = props.id
  if (!spaceId) {
    return
  }
  loading.value = true // 开始加载
  const res = await listSpaceUserUsingPost({
    // @ts-ignore
    spaceId: spaceId,
  })
  loading.value = false // 结束加载
  if (res.data?.code === 0 && res.data?.data) {
    dataList.value = res.data?.data || []
  } else {
    message.error('数据获取失败')
  }
}

// 定义钩子函数，页面挂载时加载数据
onMounted(() => {
  fetchData()
  getSpaceById()
})

// 添加用户
const formData = reactive<API.SpaceUserAddDTO>({})

const handleSubmit = async () => {
  if (!props.id) {
    return
  }
  const res = await addSpaceUserUsingPost({
    // @ts-ignore
    spaceId: props.id,
    ...formData,
  })
  if (res.data.code === 0) {
    message.success('添加成功')
    // 刷新数据
    await fetchData()
  } else {
    message.error('添加失败，' + res.data.message)
  }
}

/**
 * 修改空间成员角色
 * @param value
 * @param record
 */
const editSpaceRole = async (value: any, record: any) => {
  const res = await editSpaceUserUsingPost({
    id: record.id,
    spaceRole: value,
  })
  if (res.data.code === 0) {
    message.success('修改成功')
  } else {
    message.error('修改失败，' + res.data.message)
  }
}

/**
 * 删除空间成员
 * @param id
 */
const doDeleteSpaceUser = async (id: number) => {
  if (!id) {
    return
  }
  const res = await deleteSpaceUserUsingPost({ id })
  if (res.data?.code === 0 && res.data.data) {
    message.success('删除成功')
    // 重新加载数据
    await fetchData()
  } else {
    message.error('删除失败' + res.data?.message)
  }
}
</script>

<style scoped>
#SpaceManage {
}

/* 添加成员搜索表单：复用Card组件样式，只调整间距 */
.spaceUser-search-form {
  margin-bottom: 32px;
  padding: 16px 24px; /* 卡片内边距 */
}

/* --------- 添加成员按钮 --------- */
/* 新增：按钮基础样式与过渡 */
.custom-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: bold !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; /* 基础阴影 */
}

/* 新增：按钮悬停效果 */
.custom-btn:hover {
  transform: translateY(-1px) !important; /* 上浮 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important; /* 增强阴影 */
}

/* 新增：按钮点击效果 */
.custom-btn:active {
  transform: translateY(0) !important; /* 复位 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; /* 恢复基础阴影 */
}

/* 表格容器：调整卡片样式 */
.table-container {
  padding: 16px 24px;
}

/* 表格样式微调 */
.spaceUser-table {
  margin-top: 16px;
}

/* 保留Ant Design组件原有风格，只补充少量样式 */
:deep(.ant-card-hoverable:hover) {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important; /* 增强悬停阴影 */
}

:deep(.ant-table-tbody > tr:hover) {
  background-color: #f0f7ff !important; /* 表格行悬停色 */
}
</style>
